<template>
	<view class="conceal">
		<view class="conceal-wrapper">
			<view class="title">
				<!-- 关闭按钮 -->
				<view class="colse" @click="handleCancel">
					<u-icon name="close-circle" size="16"></u-icon>
				</view>
				<text>小程序用户协议和隐私政策</text>
			</view>
			<scroll-view scroll-y="true" class="conceal-wrapper-scroll">
				<view>
					<view class="content">
						<text class="text">
							1、用户注册和账号管理规定：包括用户注册、账号安全和管理等规定。
							2、使用规范和限制：包括用户在小程序上发布内容的规范、禁止发布的内容和行为等规定。
							3、用户权利和义务：包括用户在使用小程序时享有的权利和应承担的义务等规定。
							4、免责声明和责任限制：包括小程序开发者对小程序服务的免责声明和责任限制等规定。
							5、争议解决方式：包括双方在发生争议时解决方式的规定。
							6、隐私政策：隐私政策是小程序开发者为保护用户隐私而制定的政策，规定了小程序开发者在收集、使用、存储、保护用户个人信息时应遵守的原则和措施。用户在使用小程序时，需要同意隐私政策，否则无法使用小程序。一般来说，小程序隐私政策包括以下几个方面的内容：
							7、收集和使用用户个人信息的范围和目的：包括小程序开发者收集和使用哪些用户个人信息、为什么收集和使用这些信息等说明。
							8、个人信息的保护和管理：包括小程序开发者如何保护和管理用户个人信息，以及如何处理用户请求删除、更正、撤回同意等要求的规定。
							9、信息共享和披露：包括小程序开发者在哪些情况下会共享或披露用户个人信息的规定。
							10、Cookie和类似技术的使用：包括小程序开发者在使用Cookie和类似技术时应遵守的规定。
							11、隐私政策的更新和变更：包括小程序开发者如何更新和变更隐私政策，以及用户如何获得通知和选择的规定。
						</text>
					</view>
				</view>
			</scroll-view>
			<view class="button" v-if="showButtom">
				<view class="cancel" @click="handleCancel">拒绝</view>
				<view class="getUserInfo" @click="handleSubmit">同意</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props:{
			showButtom:{
				type:Boolean,
				default:()=> false
			}
		},
		data() {
			return {}
		},
		methods: {
			handleCancel() {
				this.$emit("cancel")
			},
			handleSubmit() {
				this.$emit("submit")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conceal {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;

		.conceal-wrapper {
			width: 660rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.title {
				font-weight: bold;
				text-align: center;
				padding: 30rpx 0;
				font-size: 30rpx;
				position: relative;
				.colse{
					position: absolute;
					top: 50%;
					transform: translate(0,-50%);
					right: 30rpx;
				}
			}

			.conceal-wrapper-scroll {
				width: 660rpx;
				height: 800rpx;
				box-sizing: border-box;


				.text {
					line-height: 45rpx;
				}

				.content {
					box-sizing: border-box;
					padding-left: 30rpx;
					padding-right: 30rpx;
					padding-bottom: 50rpx;
				}
			}
		}


		.button {
			display: flex;
			border-top: 1px solid #EEEEEE;
			margin-top: 8px;

			.cancel,
			.getUserInfo {
				flex: 1;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 34rpx;
				color: #1F1F1F;
			}

			.getUserInfo {
				color: #49C265;
				border-left: 1px solid #EEEEEE;
				position: relative;

				.getPhoneNumber {
					position: absolute;
					background-color: red;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					opacity: 0;
				}

				.getUserInfo-view {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 100%;
				}
			}

		}
	}
</style>
